<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="Content-language" content="zh-CN"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="applicable-device" content="pc">

    <title>寻屋</title>
    <meta name="description" content="方便快捷寻屋"/>
    <meta name="keywords" content="寻屋"/>
    <link href="/static/css/main.css" rel='stylesheet' type='text/css'/>
    <link href="/static/css/list.css" rel='stylesheet' type='text/css'/>
    <link href="/static/lib/layui/layui.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="/static/css/detail.css" type="text/css"/>
</head>
<body>
<header th:replace="common :: header"></header>
<!-- NAV头部搜索模块 -->
<div class="searchs">
    <div class="wrapper">
        <div class="fl" log-mod="search">
            <div class="search-txt">
                <form class="clear" id="searchForm" action="#" th:action="@{/rent/house}" method="post">
                    <div class="search-tab"><i class="icon" data-bl="switch"></i>
                        <div data-bl="switch" class="check">关键词</div>

                        <div class="txt-search">
                            <input class="left txt" name="keyword" autocomplete="off"
                                   placeholder="如小区名、地铁站、房屋朝向等" id="keyword-box">
                        </div>
                    </div>
                    <button type="submit" class="act-search btn home-ico ico-search LOGCLICKEVTID">
                        搜索
                    </button>
                </form>
            </div>
        </div>
        <div class="fr last">
            <div class="ditu fr">
                <a th:href="@{/rent/house/map(cityEnName=${city.enName})}" target="_blank">
                    <i></i>
                    地图找房
                </a>
            </div>
        </div>
    </div>
</div>

<!-- 面包屑模块 -->
<div class="intro clear" mod-id="lj-common-bread">
    <div class="container">
        <div class="fl l-txt">
            <i class="icon"></i>&nbsp;
            <a href="/">寻屋</a>
            <span class="stp">&nbsp;&gt;&nbsp;</span>[<a href="/" title="选择城市">
            <span th:text="${city.cnName}">城市</span></a>]租房
            <span class="stp">&nbsp;&gt;&nbsp;</span>当前房源
        </div>
        <div class="fr r-txt"></div>
    </div>
</div>

<div class="content-wrapper">
    <div class="title-wrapper">
        <div class="content">
            <div class="title">
                <h1 class="main" th:text="${house.title}"></h1>
                <div class="sub" th:text="${house.houseDetail.description}">这个经纪人很懒，没写核心卖点</div>
            </div>
            <div class="btnContainer ">
                <button id="subscribe" th:switch="${house.subscribeStatus}"
                        th:attr="data-bind=${house.subscribeStatus}" th:style="${house.subscribeStatus != 0} ? 'background-color: #6a7b8c; color: black;'">
                    <span th:case="1">已加入待看</span>
                    <span th:case="2">已预约时间</span>
                    <span th:case="3">已看过此房</span>
                    <span th:case="0">预约看房</span>
                </button>
            </div>
        </div>
    </div>
    <div class="overview">
        <div class="img" id="topImg">
            <div class="imgContainer layui-carousel" id="overview-photos">
                <div carousel-item>
                    <div th:each="picture : ${house.pictures}">
                        <img th:src="${picture.path}"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="content zf-content">
            <div class="price ">
                <span class="total" th:text="${house.price}">-</span>
                <span class="unit">
        <span>元/月</span>
      </span>


                <span class="tips decoration">精装修</span>
                <div class="removeIcon"></div>
            </div>
            <div class="zf-room">
                <p class="lf"><i>面积：</i><span th:text="${house.area}"></span>平米</p>
                <p class="lf"><i>房屋户型：</i>
                    <span th:text="${house.room}"></span>室<span th:text="${house.parlour}"></span>厅<span
                            th:text="${house.bathroom}"></span>卫
                    <span
                            th:text="${house.houseDetail.rentWay == 0} ? '整租' : '合租'">租住方式</span></p>
                <p class="lf"><i>楼层：</i><span th:text="${house.floor}"></span>层 (共<span
                        th:text="${house.totalFloor}">0</span>层)</p>
                <p class="lf"><i>房屋朝向：</i>
                    <span th:switch="${house.direction}">
                        <span th:case="1">朝东</span>
                        <span th:case="2">朝南</span>
                        <span th:case="3">朝西</span>
                        <span th:case="4">朝北</span>
                        <span th:case="5">南 北</span>
                        <span th:case="*">其他</span>
                    </span>
                </p>
                <div class="clear"></div>
                <p><i>地铁：</i>
                    <span th:if="${house.distanceToSubway > -1}">
                        距地铁<span th:text="${house.houseDetail.subwayLineName}">线</span>
                        <span th:text="${house.houseDetail.subwayStationName}">站点</span>
                        站<span th:text="${house.distanceToSubway}">0</span>米
                    </span>
                    <span th:if="${house.distanceToSubway < 0}">暂无数据</span>
                </p>
                <p><i>小区：</i>
                    <a href="/xiaoqu/1111027382235/" th:text="${house.district}">小区</a>
                    - <a href="/zufang/c1111027382235/"><span th:text="${houseCountInDistrict}"></span>套出租中</a>
                </p>
                <p><i>位置：</i>
                    <a href="/zufang/chaoyang/" th:text="${region.cnName}">地区</a>
                </p>
                <p class="lf"><i>发布时间：</i>
                    <span th:text="${#dates.format(house.lastUpdateTime, 'yyyy-MM-dd')}">时间</span>
                </p>
                <div class="clear"></div>
            </div>
            <div class="brokerInfo" log-mod="zufang_detail_diamond-first">
                <a href="#">
                    <img class="LOGCLICK" data-log_id="20001" data-bl="agent" data-el="1000000020276906"
                         th:src="${agent.avatar}" alt="经纪人">
                </a>
                <div class="brokerInfoText">
                    <div class="brokerName">
                        <a href="#" class="name LOGCLICK" data-log_id="20001"
                           data-bl="agent" data-el="1000000020276906" th:text="${agent.name}">经纪人</a>
                        <span class="tag ">高级经纪人</span>
                        <a class="LOGCLICK" data-log_id="20001" data-bl="agentim"
                           data-el="1000000020276906" style="display: none;" title="在线咨询"
                           data-ucid="1000000020276906">
                        </a>
                    </div>
                    <div class="evaluate">
                        <span class="time">本房带看：<span th:text="${house.watchTimes}">0</span>次</span>
                    </div>
                    <div class="phone" th:text="${agent.phoneNumber}">
                    </div>
                </div>
            </div>
            <div class="houseRecord">
                <span class="houseNum">寻屋编号：<span th:text="${house.id}"></span></span>
                <div class="right">
                    <span class="detail">真实房源，假一赔亿！</span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="detailPageTab">
    <ul style="position: relative; top: 0px; z-index: 1000; width: 1000px;">
        <li>
            <a class="force" href="#introduction">房源介绍</a>
        </li>
        <li>
            <a href="#around" class="">周边配套</a>
        </li>
    </ul>
</div>

<div class="content-wrapper introduction-wrapper" id="introduction">
    <div class="introduction">
        <div class="title">房源介绍</div>
        <div class="introContent">
            <div class="base">
                <div class="name">基本属性</div>
                <div class="content">
                    <ul>
                        <li><span class="label">租赁方式：</span>
                            <span th:text="${house.houseDetail.rentWay == 0 ? '整租' : '合租'}"></span>
                        </li>
                        <li>
                            <span class="label">付款方式：</span>
                            季付
                        </li>
                        <li>
                            <span class="label">房屋现状：</span>
                            <span th:switch="${house.status}">
                                <span th:case="0">暂未上架</span>
                                <span th:case="1">目前出租</span>
                                <span th:case="2">已出租</span>
                                <span th:case="3">已下架</span>
                            </span>
                        </li>
                        <li><span class="label">房屋朝向：</span>
                            <span th:switch="${house.direction}">
                                <span th:case="1">朝东</span>
                                <span th:case="2">朝南</span>
                                <span th:case="3">朝西</span>
                                <span th:case="4">朝北</span>
                                <span th:case="5">南 北</span>
                                <span th:case="*">其他</span>
                            </span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="feature">
                <div class="name">房源特色</div>
                <div class="zf-tag">
                    <ul class="se">
                        <li class="tag1 tags">
                            <span></span>
                            床
                            <p>
                            </p>
                        </li>
                        <li class="tag11 tags">
                            <span></span>
                            衣柜
                            <p>
                            </p>
                        </li>
                        <li class="tag12 tags">
                            <span></span>
                            桌椅
                            <p>
                            </p>
                        </li>
                        <li class="tag2 tags">
                            <span></span>
                            电视
                            <p>
                            </p>
                        </li>
                        <li class="tag3 tags">
                            <span></span>
                            冰箱
                            <p>
                            </p>
                        </li>
                        <li class="tag4 tags">
                            <span></span>
                            洗衣机
                            <p>
                            </p>
                        </li>
                        <li class="tag5 tags">
                            <span></span>
                            空调
                            <p>
                            </p>
                        </li>
                        <li class="tag10 tags">
                            <span></span>
                            热水器
                            <p>
                            </p>
                        </li>
                        <li class="tag13 tags">
                            <span></span>
                            微波炉
                            <p>
                            </p>
                        </li>
                        <li class="tag6 tags">
                            <span></span>
                            暖气
                            <p>
                            </p>
                        </li>
                        <li class="tag7 tags">
                            <span></span>
                            宽带
                            <p>
                            </p>
                        </li>
                        <li class="tag9 tags">
                            <span></span>
                            天然气
                            <p>
                            </p>
                        </li>
                    </ul>
                    <div class="clear"></div>
                </div>
                <div class="featureContent">
                    <ul>
                        <li>
                            <span class="label">户型介绍：</span>
                            <span class="text" th:text="${house.houseDetail.layoutDesc}">暂无描述</span>
                        </li>
                        <li>
                            <span class="label">交通出行：</span>
                            <span class="text" th:text="${house.houseDetail.traffic}">暂无描述</span>
                        </li>
                        <li>
                            <span class="label">周边配套：</span>
                            <span class="text" th:text="${house.houseDetail.roundService}">暂无描述</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="more">展开更多信息</div>
    </div>
</div>

<div id="only" data-city="bj" data-page="zufang_view"></div>
<div th:include="common :: footer"></div>
<script type='text/javascript'>
    (function(m, ei, q, i, a, j, s) {
        m[i] = m[i] || function() {
                (m[i].a = m[i].a || []).push(arguments)
            };
        j = ei.createElement(q),
            s = ei.getElementsByTagName(q)[0];
        j.async = true;
        j.charset = 'UTF-8';
        j.src = 'https://static.meiqia.com/dist/meiqia.js?_=t';
        s.parentNode.insertBefore(j, s);
    })(window, document, 'script', '_MEIQIA');
    _MEIQIA('entId', 75794);
</script>
<script src="/static/lib/layui/layui.js" type="text/javascript"></script>
<script th:inline="javascript" type="text/javascript">
    <!-- layui的图片轮播 -->
    layui.use('carousel', function () {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#overview-photos',
            width: '100%', //设置容器宽度
            arrow: 'always', //始终显示箭头
            //,anim: 'updown' //切换动画方式
            height: '400px',
            autoplay: false // 关闭自动切换
        });
    });

    $(function () {
        var houseId = [[${house.id}]],
            subscribeBtn = $('#subscribe');
        subscribeBtn.on('click', function () {
            var subscribeStatus = subscribeBtn.attr('data-bind');
            switch (subscribeStatus) {
                case "1":
                case "2":
                    cancelSubscribe();
                    break;
                case "3":
                    layer.msg('您已看过此房!', {icon: 5, time: 2000});
                    break;
                default:
                    subscribe();
                    break;
            }

            function subscribe() {
                $.ajax({
                    url: '/api/user/house/subscribe',
                    data: {
                        'house_id': houseId
                    },
                    type: 'POST',
                    success: function (data) {
                        if (data.code === 200) {
                            subscribeBtn.attr('data-bind', "1");
                            subscribeBtn.css('background-color', '#6a7b8c');
                            subscribeBtn.css('color', 'black');
                            subscribeBtn.find('span').text('已加入待看');
                        } else if (data.code === 403) {
                            layer.msg('请先登录,再执行预约操作', {icon: 5, time: 2000});
                        } else {
                            layer.msg(data.message, {icon: 5, time: 2000});
                        }
                    },
                    error: function (xhr, response, error) {
                        if (xhr.status === 403) {
                            layer.msg('请先登录,再执行预约操作', {icon: 5, time: 2000});
                        } else {
                            layer.msg('Server Error: ' + response, {icon: 5, time: 3000});
                        }
                    }
                });
            }

            function cancelSubscribe() {
                layer.confirm('确认要取消预约吗', {
                    btn: ['确认', '取消'] //按钮
                }, function () {
                    $.ajax({
                        url: '/api/user/house/subscribe?house_id=' + houseId,
                        type: 'DELETE',
                        success: function (data) {
                            if (data.code === 200) {
                                subscribeBtn.attr('data-bind', "0")
                                    .css('background-color', '#0054a5')
                                    .css('color', '#fff');
                                subscribeBtn.find('span').text('预约看房').css('color');
                                layer.msg('已取消预约!', {icon: 6, time: 2000});
                            } else if (data.code === 403) {
                                layer.msg('请先登录,再执行操作', {icon: 5, time: 2000});
                            } else {
                                layer.msg(data.message, {icon: 5, time: 2000});
                            }
                        },
                        error: function (xhr, response, error) {
                            if (xhr.status === 403) {
                                layer.msg('请先登录,再执行预约操作', {icon: 5, time: 2000});
                            } else {
                                layer.msg('Server Error: ' + response, {icon: 5, time: 3000});
                            }
                        }
                    });
                });

            }
        });
    });
</script>
</body>
</html>
